Image synthesis 
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Spatial variation 


= Allow BRDF parameters to vary over space 


- Diffuse / specular colors, roughness, normal 


Spatial variation 


Textures are used for representing all elements 
Material (BRDFs, BTFs) 
Geometry (normal / bump / displacement maps) 
Lighting (light / environment maps) 


+ environnement | 1 
* Light Probes. | 
+ Height Field 
ru | 


The bad idea 


Store BRDF properties on each vertex 


Refine / tesselate if necessary 


On a given point, interpolate properties (barycentric 
coords) 


But: 


Details mean (much) more geometry/memory 


Only works on meshes 


The good idea 


- Use textures 


Model + Shading 


+ Textures 


For more info on the computer artwork of Jeremy Birn 
see : render.com/ibirn/productions.btml 


Textures for what? 


BRDF variations 


Textures for what? 


- Geometry variations 
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simplified mesh 
and normal mapping 
500 triangles 


original mesh simplified mesh 
4M triangles 500 triangles 


Textures for what? 


- Geometry variations 
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Textures for what? 


- Visibility (ambient occlusion) 


Coarse shadows approximation 


A== [vd 


Original model With ambient occlusion Extracted ambient occlusion map 


Textures for what? 


- Lighting environments 


Textures for what? 


Lighting environments 


2 approaches 


- From data 
= Colors, coefs, normals stored in 2D 
images 


2 approaches 


- From data 
- Colors, coefs, normals stored in 2D 
images 


- Procedural shader 
- Little program that compute info at 
a given position 


Procedurai textures 


pros 
Easy to implement (ray tracing) 
Compact 


Infinite resolution 


Cons 
Non-intuitive 


Difficult to match existing textures 
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Cellular textures 


- Generate a bunch of random points 


= For each pixel 
Find the nearest distance to the nearest couple points 
Use these values to determine a color 


= Voronoi-like 


https://www.google.fr/search?q=cellular+texture&tom=isch&tbo=u&source=univ&sa=X&ei=FADJVKG8Mc 
XwUpfRg6AK&ved=0CCIQSAQ&biw= 1 920&bih=969 


Minimizing functions 


Genetic algorithms 


Reaction-diffusion 
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L-systems 


Formal grammar 


e Alphabet: V = (A, B) 

e Constantes : S = {} 

e Axiome de départ : w = A 

e Règles : (A — AB) a (B — A) 
Notation : 


Algue 


L-systems 


Formal grammar 


e Alphabet: V = (A, B) 

e Constantes : S = {} 

e Axiome de départ : w = A 

e Règles : (A — AB) ^ (B — A) 


Notation : 


e n=0, A 

e n=1,AB 

e n-2, ABA 

e n=3, ABA AB 

n-4, ABA AB AB A 

n-5, AB A AB AB A AB A AB 

e n=6, AB A AB AB A ABA AB ABA AB AB A 


http://www.kevs3d.co.uk/dev/Isystems/ 


Perlin-like textures 


- Requirements 
- Pseudo random 
- Arbitrary dimension 
- Smooth 
- Band pass (one scale) 
- Little memory usage 


- Implicit evaluation 


Perlin-like textures 


Value noise 1D case 


Distribute random values at particular locations (a grid)... 
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Perlin-like textures 


Value noise 1D case 


Distribute random values at particular locations (a grid)... 


... and interpolate 
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Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
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Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 


Get the associated 2 random values? 
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Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 


Precomputed in an array 


O www.scratchapixel.com 


1 


Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 
Precomputed in an array 
Get relative position of x (between O and 1) 
Mix 
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Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 
Precomputed in an array 
Get relative position of x (between O and 1) 
Mix 
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S-shaped function t = t^(3 — 2t) 


Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 
Precomputed in an array 
Get relative position of x (between O and 1) 
Mix 


0 1 2 3 4 5 6 7 8 9 10 
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Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 
Pros/cons? 
Precomputed in an array 
Get relative position of x (between 0 and 1) 
Mix 


Perlin-like textures 


Value noise 1D case 


Evaluation algorithm for a given point x 
Get the associated 2 random values? 
Pseudo random function 
Pros/cons? 
Precomputed in an array 
Get relative position of x (between 0 and 1) 
Mix 


copy original curve copy 
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Perlin-like textures 


Value noise 1D case 


Controls 


Frequency: evalNoise( x * freq ) 
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Perlin-like textures 


Value noise 1D case 


: Controls 
- Frequency: evalNoise( x * freq ) 


= Amplitude: evalNoise( x ) * amplitude 
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Perlin-like textures 


Value noise 1D case 


- Controls 
Frequency: evalNoise( x * freq ) 
Amplitude: evalNoise( x ) * amplitude 


Offsetting: evalNoise( x + offset ) 
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Perlin-like textures 


Value noise 2D case 


Same principle, using a 2D grid 


Perlin-like textures 


Value noise 2D case 
Same principle, using a 2D grid 


Need 3 interpolations instead of 1 


4 O www.scratchapixel.com 
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https://www.shadertoy.com/view/Isf3WH 
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Perlin-like textures 


Value noise 3D case 


Same principle, using a 3D grid 


Need 7 interpolations 
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Perlin-like textures 


Value noise 3D case 


Same principle, using a 3D grid 


Need 7 interpolations 


e 


httos://www.shadertoy.com/view/4sfGzS 


Perlin-like textures 


Gradient noise (1D case) 


Instead of distributing random positions: 
Consider positions at O 


Distribute random gradients 


Interpolate 


Perlin-like textures 


Gradient noise (1D case) 
Instead of distributing random positions: 


Consider positions at O Available: G1, G2 and dx 
Distribute random gradients 


Interpolate 


Perlin-like textures 


Gradient noise (1D case) 
Instead of distributing random positions: 


Consider positions at O Available: G1, G2 and dx 


Distribute random gradients n1 = dx*G1 
n2 = (dx-1)*G2 


Interpolate 


Perlin-like textures 


Gradient noise (1D case) 


Instead of distributing random positions: 


Consider positions at O Available: G1, G2 and dx 
Distribute random gradients ni = dx*G1 
n2 = (dx-1)*G2 
Interpolate 
P = w1.G1.dx + w2.G2.(dx-1) 
: 2 
noise — — 
wl w2 t=t (3 21) 
value à | p 


http://en.wikipedia.org/wiki/Gradient noise 


Perlin-like textures — 


Gradient noise (2D case) E 


gixi,vü) 


Same principle 


2D gradients on each point 
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Perlin-like textures ae 


Gradient noise (2D case) B 


Same principle 


2D gradients on each point 


Compute positional differences 
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Perlin-like textures 


Gradient noise (2D case) E 


gíx1,y1) 


Same principle g(x1,yD) 


2D gradients on each point 


Compute positional differences 


Compute corner values 
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Perlin-like textures 


Gradient noise (2D case) E 


gíx1,y1) 


Same principle g(x1,yD) 


2D gradients on each point 


Compute positional differences 


Compute corner values 


s = glxo. yo) ` (Gr. y) - (xo. Yo) . 


. gíx0,yD) 
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And interpolate, as before 


https://www.shadertoy.com/view/XdXGW8 e 


Perlin-like textures 


Gradient noise (3D case) J5 


+ o 
Same principle... again A 
3D gradients on each point 


Compute positional differences 


Compute corner values 


And interpolate, as before 


Perlin-like textures 


Gradient noise (3D case) 


Same principle... again 
3D gradients on each point 
Compute positional differences 
Compute corner values 


And interpolate, as before 


Speeding it up (precompute gradients) 


e Precompute (1D) table of n gradients G|n] 


e Precompute (1D) permutation P[n] 
e For 3D grid point i, j, k : 
G(ij,k) = G| (i+ P| G+ P[k]) mod n |) mod | 


Perlin-like textures 


Gradient noise (3D case) 


Simplex noise 
Use triangles instead of quads 


Sum contributions instead of interpolating 


http://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf 
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Perlin-like textures 


Gradient noise (3D case) 


- Simplex noise 
- Use triangles instead of quads 


- Sum contributions instead of interpolating 


htto://webstaff.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf 


Fractal textures 


Noise at one scale = 1 octave 


Fractal textures 
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Noi n le = 1 V - dun 
oise at one scale = 1 octave oe E ee 


Multiple octave usually used 


frequency = 1, scale = 1 + 
Frequency multiplied by 2 each time _— — = MÀ 


Hence the name octave li a esca estan 


un cree O ig 


Different amplitudes too 
frequency = 4, scale = 0.25 + 


frequency = 8, scale = 0.125 + 


frequency = 16, scale = 0.0625 


Fractal textures 
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Noise at one scale = 1 octave PN NV 


Multiple octave usually used eee ei 


Frequency multiplied by 2 each time = SC N D+ _ — 


Hence the name octave meguency d scale moe 


N Ne 


Different amplitudes too > 
frequency = 4, scale = 0.25 + 


Sum of all noises = 
Fractal noise frequency = 8, scale = 0.125 + 


frequency = 16, scale = 0.0625 
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Fractal textures 


Computing the ¡th noise texture: 


frequency = 2 | 
amplitude = persistence’ 


Fractal textures 


Computing the ¡th noise texture: 


frequency = 2 | 
amplitude = persistence’ 


Persistence controls the relation between frequency and amplitude: 


Frequency 1 2 4 8 16 32 
Persistence = 1/4 iid +- et - ^ + — «at 
Amplitude: 1 Z^ lh6 PM lose 1/1024 result 
Persistence — 1/2 -i — EE + o E 3d 
Amplitude: 1 1 1/4 lg 116 1/35 result 
Persistence = 1 / root2 A+" l (ew vt Jonas mm KM 
Amplitude: 1 1/1414 19 1/2 828 a l/s 656 result 
Persistence — 1 pe | T €. m | * + i" Lili = LM a | 


Amplitude: 1 1 1 1 1 1 result 
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Fractal textures 


- 2D example 


Freq=16 

Scale=0.0625 
+ 

Freq=8 


Scale=0.125 
$ 


Freq=4 
Scale=0.25 


+ 
Freq=2 
Scale=0.5 


+ 
Freq=1 


Scale=1 
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Fractal textures 


- 2D example Each octave f has weight 1/1 


Freq= 

Scale=( 
+ 

Freq= 
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Fractal textures 


3D example Sum 1/f(noise) 


Fractal textures 


Taking the absolute value of the noise Sum 1/f([noise|) 
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Creates CO discontinuities 


1D |noise| 


Fractal textures 


- Taking the absolute value of the noise Sum 1/f(Jnoisel) 
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ASA Creates CO discontinuities 
1D [noise] 


2D |noise| 


Fractal textures 


Taking the absolute value of the noise Sum 1/f([noise|) 
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q j y 1D |noise| 


Creates CO discontinuities 


2D |noise| 3D [noise] 


Fractal textures 


Even better: Sin (x + Sum 1/f(noise) ) 


Fractal textures 


enoise sin(x + sum l/f( [noise] )) 
o 3 Adidas 
3 E 


sum 1/f(noise) sum 1/f( |noisel ) 


Fractal textures 


: Marble 


Sin (x + Sum 1/f(noise) ) 


Colormap(Sin (x + turbulence)) 


Wood 


Colormap(Sin (radius + turbulence)) 


Fractal textures 


Texture 
- Terrain 
Clouds 


» Fire 


But also, 

Density for distributing elements 
- Forest 

: Plants 

= Etc 


Render to texture 


- Allows to render in a texture instead of the output framebuffer 


= Usefull to 
- Create textures using the GPU... 
httos://www.shadertoy.com/view/4sfGzS 


= Manipulate images/renderings (post-effecis) 
http://evanw.github.io/webgl-filter/ 


- Deferred shading 
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